<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./test-css/iconfont.css" />
    <!--引用百度地图API  修改密钥-->
    <script
      type="text/javascript"
      src="http://api.map.baidu.com/api?v=2.0&ak=A5j0zidDv3y1zNLNRFDIVGXSOOsUdoXX"
    ></script>
    <style>
      .map{
        margin: 100px auto;
      }
    </style>
  </head>
  <body>
    <!--设置 百度地图容器-->
    <div
    class="map"
      style="
        width: 540px;
        height: 500px;
        border: #ccc solid 1px;
        font-size: 12px;
      "
      id="map"
    ></div>
  </body>
  <script type="text/javascript">
    //创建和初始化地图函数：
    function initMap() {
      createMap(); //创建地图
      setMapEvent(); //设置地图事件
      addMapControl(); //向地图添加控件
      addMapOverlay(); //向地图添加覆盖物
    }
    function createMap() {
      map = new BMap.Map("map");
      map.centerAndZoom(new BMap.Point(114.347061, 34.816862), 15);
    }
    function setMapEvent() {
      map.enableScrollWheelZoom();
      map.enableKeyboard();
      map.enableDragging();
      map.enableDoubleClickZoom();
    }
    function addClickHandler(target, window) {
      target.addEventListener("click", function () {
        target.openInfoWindow(window);
      });
    }
    function addMapOverlay() {
      var markers = [
        {
          content: "我的备注",
          title: "清明上河园",
          imageOffset: { width: 0, height: 3 },
          position: { lat: 34.815262, lng: 114.348211 },
        },
      ];
      for (var index = 0; index < markers.length; index++) {
        var point = new BMap.Point(
          markers[index].position.lng,
          markers[index].position.lat
        );
        var marker = new BMap.Marker(point, {
          icon: new BMap.Icon(
            "http://api.map.baidu.com/lbsapi/createmap/images/icon.png",
            new BMap.Size(20, 25),
            {
              imageOffset: new BMap.Size(
                markers[index].imageOffset.width,
                markers[index].imageOffset.height
              ),
            }
          ),
        });
        var label = new BMap.Label(markers[index].title, {
          offset: new BMap.Size(25, 5),
        });
        var opts = {
          width: 200,
          title: markers[index].title,
          enableMessage: false,
        };
        var infoWindow = new BMap.InfoWindow(markers[index].content, opts);
        marker.setLabel(label);
        addClickHandler(marker, infoWindow);
        map.addOverlay(marker);
      }
    }
    //向地图添加控件
    function addMapControl() {
      var scaleControl = new BMap.ScaleControl({
        anchor: BMAP_ANCHOR_BOTTOM_LEFT,
      });
      scaleControl.setUnit(BMAP_UNIT_IMPERIAL);
      map.addControl(scaleControl);
      var navControl = new BMap.NavigationControl({
        anchor: BMAP_ANCHOR_TOP_LEFT,
        type: BMAP_NAVIGATION_CONTROL_LARGE,
      });
      map.addControl(navControl);
      var overviewControl = new BMap.OverviewMapControl({
        anchor: BMAP_ANCHOR_BOTTOM_RIGHT,
        isOpen: true,
      });
      map.addControl(overviewControl);
    }
    var map;
    initMap();
  </script>
</html>
